<script setup lang='ts'>
import { reactive, ref, watchEffect } from 'vue';
import type { CalendarDateType, CalendarInstance } from 'element-plus';
import { dayjs, ElMessage } from 'element-plus';
import { ConsultantScheduling, ModifySchedule } from '@/api/interfaceApi/params';
import { getConsultantScheduling, modifySchedule } from '@/api/interfaceApi/https';

dayjs.locale('zh-cn');
const props = defineProps({
    itemId: String
});
const calendar = ref<CalendarInstance>();
let selectDate = ref<string>(dayjs(new Date()).format('YYYY-MM-DD'));
let params = ref<ConsultantScheduling>({
    teacherId: props.itemId,
    date: selectDate.value
});
let schedulingList = reactive([]);
let dateArr = reactive<any>([]);
let statusArr = reactive<any>([]);
let periodList = ref([]);
let dateValue = ref(new Date());

//
function getList(params: ConsultantScheduling) {
    getConsultantScheduling(params).then((res: { code: number; data: never[]; rows: never[]; }) => {
        if (res.code === 200) {
            schedulingList = res.data;
            dateArr.length = 0;
            statusArr.length = 0;
            schedulingList.forEach((item: any) => {
                dateArr.push(item.date);
                statusArr.push(item.status);

            });
            periodList.value = res.rows;
            periodList.value.forEach((item: any) => {
                item.checked = false;
            });
        }
    });
}

// getList(params.value);
watchEffect(() => {
    params.value = {
        teacherId: props.itemId,
        date: selectDate.value
    };
    getList(params.value);
});

function setItemClass(n: string): string {
    return n === '0' ? 'time-list-item-success' : n === '1' ? 'time-list-item-error' : 'time-list-item-warning';
}

function changeDate(date: string) {
    selectDate.value = date;
    params.value = {
        teacherId: props.itemId,
        date: selectDate.value
    };
}

function getDay(date: any, num: number) {
    let nextDay = new Date(date);
    nextDay.setDate(nextDay.getDate() + num);
    const selected = dayjs(new Date(nextDay)).format('YYYY-MM-DD');
    changeDate(selected);
    dateValue.value = nextDay;
}

let isShow = ref<boolean>(false);
let state = ref<string>('');

function change(n: string) {
    isShow.value = true;
    state.value = n;
}

function updateState() {
    const flag = periodList.value.some((item) => {
        return item.checked;
    });
    if (flag) {
        const arr = periodList.value.filter((item) => {
            return item.checked;
        });
        console.log(arr);
        arr.forEach((item) => {
            const paramsSchedule: ModifySchedule = {
                id: item.id,
                status: state.value
            };
            modifySchedule(paramsSchedule).then((res: { code: number; }) => {
                if (res.code === 200) {
                    console.log(res);
                    getList(params.value);
                    isShow.value = false;
                    ElMessage({
                        message: '修改成功',
                        type: 'success'
                    });
                }
            });
        });


    } else {
        ElMessage({
            message: '请选择需要修改的时间段',
            type: 'warning'
        });
    }
}

const changeCalendar = (val: CalendarDateType) => {
    if (!calendar.value) return;
    calendar.value.selectDate(val);
};
</script>

<template>
    <div class='teacher-container'>
        <div class='calendar-container'>
            <el-calendar ref='calendar' v-model='dateValue'>
                <template #header='{ date }'>
                    <span>{{ date }}</span>
                    <el-button-group>
                        <el-button size='small' @click="changeCalendar('prev-month')">
                            上个月
                        </el-button>
                        <el-button size='small' @click="changeCalendar('next-month')">
                            下个月
                        </el-button>
                    </el-button-group>
                </template>
                <template #date-cell='{ data }'>
                    <div class='day-item' v-if='dateArr.includes(data.day)'
                         :class='statusArr[dateArr.indexOf(data.day)]?"appointment":"alreadyExpired"'
                         @click='changeDate(data.day)'>
                        <span>{{ data.day.split('-').slice(2).join('-') }}</span>
                        <div class='reservation-status'>{{ statusArr[dateArr.indexOf(data.day)] ? '可约' : '不可约' }}
                        </div>
                    </div>
                    <div class='day-item' v-else @click='changeDate(data.day)'>
                        <span class='data-title'>{{ data.day.split('-').slice(2).join('-') }}</span>
                    </div>
                </template>
            </el-calendar>

        </div>
        <div class='detail-container'>
            <div class='schedule-day-header'>
                <div class='schedule-day-header-title'>
                    详细情况
                    <el-popover
                        placement='right-end'
                        title=''
                        :width='300'
                        trigger='hover'
                        content='时间段右击可进行快捷选项操作(时间段未开始并且未预约)'
                        :offset='10'
                        popper-style='padding:15px'
                    >
                        <template #reference>
                            <span class='question'>
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </span>
                        </template>
                    </el-popover>

                </div>
                <el-button-group>
                    <el-button size='small' @click='getDay(new Date(Date.parse(selectDate)),-1)'>
                        上一天
                    </el-button>
                    <el-button size='small' @click='getDay(new Date(Date.parse(selectDate)),1)'>
                        下一天
                    </el-button>
                </el-button-group>
            </div>
            <div class='schedule-day-body'>
                <div class='schedule-day-body-top'>
                    <el-button @click='change("0")'>
                        可约
                    </el-button>
                    <el-button @click='change("2")'>
                        休息
                    </el-button>
                </div>
                <div class='schedule-day-body-content'>
                    <ul class='time-list'>
                        <li class='time-list-item' v-for='item in periodList' :key='item.id'
                            :class='setItemClass(item.status)'
                            :style='item.status === "0" && new Date(item.date+" " +item.startTime)<= new Date()?"background-color: rgb(230, 230, 230)":""'
                            @click='item.checked = !item.checked'>
                            <el-checkbox name='type' class='check-box'
                                         v-if='isShow && state==="0" && item.status === "2" && new Date(item.date+" " +item.startTime) > new Date()'
                                         v-model='item.checked'></el-checkbox>
                            <el-checkbox name='type' class='check-box'
                                         v-if='isShow && state==="2" && item.status === "0"  && new Date(item.date+" " +item.startTime) > new Date()'
                                         v-model='item.checked'></el-checkbox>

                            <el-tag size='small'
                                    :type="item.status === '0'?'success':item.status === '1'?'danger':'warning'"
                                    effect='dark' class='tab-box'>

                                {{ item.status === '0' ? '可约' : item.status === '1' ? '已满' : '休息' }}
                            </el-tag>
                            <span>{{ item.startTime }} - {{ item.endTime }}</span>
                        </li>
                    </ul>
                </div>
                <div class='schedule-day-body-bottom' :style='isShow?"display:block":""'>
                    <el-button @click='isShow = false'>取消</el-button>
                    <el-button @click='updateState' type='primary'>保存</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang='scss'>
.teacher-container {
    display: flex;
    justify-content: space-between;

    .calendar-container {
        width: 47%;

        ::v-deep(.el-calendar-day) {
            padding: 0;
        }
    }

    .detail-container {
        width: 50%;

        .schedule-day-header {
            display: flex;
            justify-content: space-between;
            padding: 12px 20px;
            border-bottom: 1px solid #dfe6ec;

            .schedule-day-header-title {
            }

        }

        .schedule-day-body {
            padding: 15px 20px;

            .schedule-day-body-top {
                ::v-deep(.el-button) {
                    width: 100px;
                }
            }

            .schedule-day-body-content {
                padding: 15px 0;

                .time-list {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    row-gap: 10px;

                    .time-list-item {
                        position: relative;
                        width: 24%;
                        height: 80px;
                        text-align: center;
                        line-height: 80px;
                        border-radius: 5px;
                        cursor: pointer;

                        .tab-box {
                            position: absolute;
                            top: 5px;
                            right: 5px;
                        }

                        .check-box {
                            position: absolute;
                            top: -2px;
                            left: 5px;
                        }
                    }

                    .time-list-item-success {
                        background-color: #F1FFEE;
                    }

                    .time-list-item-error {
                        background-color: #FFE8E8;
                    }

                    .time-list-item-warning {
                        background-color: rgba(219, 162, 0, .23);
                    }
                }

            }
        }

        .schedule-day-body-bottom {
            display: none;
            text-align: right;

            ::v-deep(.el-button--default) {
                padding: 10px 20px;
                font-size: 14px;
                border-radius: 4px;
            }
        }
    }
}

.reservation-status {
    padding-top: 15px;
    text-align: center;
}
.day-item {
    padding: 8px;
    width: 100%;
    height: 100%;

    > span {
        color: black;
    }
}

.appointment {
    background-color: rgba(130, 231, 105, 0.1);
    color: #23a500;
}

:deep(.el-calendar-table .el-calendar-day:hover) {
    background-color: #84aae1 !important;
}
.alreadyExpired {
    background-color: rgba(255, 27, 27, .1);
    color: #ff1b1b;
}

::v-deep(.el-tag--dark.el-tag--warning) {
    background-color: #ffba00;
    border-color: #ffba00;
    color: #fff;
}

::v-deep(.el-tag--dark.el-tag--success) {
    background-color: #13ce66;
    border-color: #13ce66;
    color: #fff;
}

::v-deep(.el-tag--small) {
    height: 20px;
    padding: 0 5px;
    line-height: 19px;
}
</style>
